import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个 widget 是应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是应用程序的主题。
        //
        // 尝试运行你的应用程序（使用 "flutter run"）。你会看到应用程序有一个紫色工具栏。
        // 然后，在不退出应用程序的情况下，尝试将下面 colorScheme 中的 seedColor 改为 Colors.green，
        // 然后调用“热重载”（在支持 Flutter 的 IDE 中保存更改或按下“热重载”按钮，或者如果你使用命令行启动了应用，则按 "r"）。
        //
        // 注意计数器没有重置回零；应用程序状态在重载期间不会丢失。要重置状态，请使用热重启。
        //
        // 这对代码也有效，而不仅仅是值：大多数代码更改可以通过热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const MyHomePage(title: '首页'),
    );
  }


}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个 widget 是应用程序的主页。它是有状态的，意味着它有一个 State 对象（定义在下方），其中包含影响其外观的字段。

  // 这个类是状态的配置。它持有父级（在这种情况下是 App widget）提供的值（在这种情况下是标题）
  // 并由 State 的 build 方法使用。Widget 子类中的字段总是标记为 "final"。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个调用 setState 告诉 Flutter 框架某些东西在这个 State 中发生了变化，
      // 这会导致下面的 build 方法重新运行，以便显示可以反映更新后的值。如果我们改变了 _counter 而不调用 setState，
      // 那么 build 方法不会再次被调用，因此什么也不会发生。
      _counter += 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行这个方法，例如上面的 _incrementCounter 方法所做的那样。
    //
    // Flutter 框架已经进行了优化，以使重新运行 build 方法变得快速，因此你可以重建任何需要更新的东西，
    // 而不是单独更改小部件的实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试在这里将颜色更改为特定颜色（例如 Colors.amber），然后触发热重载，以查看 AppBar 更改颜色，
        // 而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 我们从 MyHomePage 对象中获取值，该对象是由 App.build 方法创建的，并用它设置我们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局 widget。它接受一个子组件并将其定位在父组件的中间。
        child: Column(
          // Column 也是一个布局 widget。它接受一组子组件并垂直排列它们。默认情况下，
          // 它会水平适应其子组件的大小，并尝试与其父组件一样高。
          //
          // Column 有各种属性来控制它的大小和子组件的位置。这里我们使用 mainAxisAlignment 来垂直居中子组件；
          // 主轴在这里是垂直轴，因为 Columns 是垂直的（交叉轴将是水平的）。
          //
          // 尝试调用“调试绘制”（选择 IDE 中的“切换调试绘制”操作，或在控制台中按 "p"），
          // 以查看每个 widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('你可以点击右下角按钮来使得下列数据递增:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Echo(text:"Hello world")
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '点击递增',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化更好看。
    );
  }
}



class Echo extends StatelessWidget  {
  const Echo({
    Key? key,
    required this.text,
    this.backgroundColor = Colors.red, //默认为灰色
  });

  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(text),
      ),
    );
  }
}

